<template>
	<div class="app-container">
		<div v-if="user">
			<el-row :gutter="20">
				<el-col :span="6" :xs="24">
					<user-card :user="user" />
				</el-col>

				<el-col :span="18" :xs="24">
					<el-card>
						<el-tabs v-model="activeTab">
							<el-tab-pane label="联系方式" name="account">
								<account :user="user" />
							</el-tab-pane>
						</el-tabs>
					</el-card>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import UserCard from './components/UserCard'
import Account from './components/Account'

export default {
	name: 'Profile',
	components: { UserCard, Account },
	data() {
		return {
			user: {},
			activeTab: 'account'
		}
	},
	computed: {
		...mapGetters(['name', 'avatar', 'roles', 'introduction'])
	},
	created() {
		this.getUser()
	},
	methods: {
		getUser() {
			this.user = {
				name: this.name,
				role: this.roles.join(' | '),
				email: 'admin@test.com',
				avatar: this.avatar,
				introduction: this.introduction
			}
		}
	}
}
</script>
<style lang='scss' scoped>
::v-deep .el-tabs__nav-wrap {
	overflow: hidden;
	margin-bottom: -1px;
	position: relative;
	z-index: 0;
}
::v-deep .el-image-viewer__close {
	top: 104px;
	right: 60px;
	color: white;
}
::v-deep .el-image-viewer__actions__inner {
	i {
		cursor: pointer;
	}
}
.el-row {
	position: relative;
}
::v-deep .el-col-18 {
	padding-left: 0px !important;
	padding-right: 0px !important;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 20px;
	background: white;
	border: 1px solid #e6ebf5;
	.el-card {
		border: none;
	}
}
::v-deep .el-card.is-always-shadow {
	box-shadow: none;
}
</style>
